<template>
<!-- 外部关联视图关系查询 -->
  <div class="elevanceViewscontent">
    <div @click="closeBox">X</div>
    <el-table v-if="ListArow.length>0"
        :data="ListArow"
        :span-method="objectSpanMethod"
         class="tableArea"
         style='height:calc(100% - 1px);overflow:auto;width: 100%'>
        <el-table-column
          prop="masterTableName"
          label="原表名称1111"
          align="center"
          width="100"/>
          <el-table-column
          prop="slaveTableName"
          label="关联表名称"
          align="center"
          width="100"/>
        <el-table-column
          prop="masterShowfld"
          label="原表字段"/>
          <el-table-column
          prop="relationTypelabel"
          label="关联类型"/>
        <el-table-column
          prop="slaveShowfld"
          label="关联表字段名称"/>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" content="修改" placement="top-start">
              <i class="el-icon-edit-outline" @click="modify(scope.$index, scope.row)" />
             </el-tooltip>
             <el-tooltip class="item" content="删除" placement="top-start">
              <i class="el-icon-delete" @click="deleteData(scope.$index, scope.row)" />
             </el-tooltip>
          </template>
        </el-table-column >
      </el-table>
      <el-button @click="showpup"  class="el-icon-circle-plus">添加关联关系</el-button>
  </div>
</template>
<script>
import {QUERYELEVANCEVIEW} from '@api/url'
export default {
  data(){
    return{
      spanArr:[],
      pos:null,
      ListArow:[]
    }
  },
  props:{
    menuData:{
      type:Object,
      default:null
    },
  },
  watch:{
    menuData(val){
       this.queryElevanceViews(val)
    }
  },
  
  mounted() {
    this.queryElevanceViews()
    
  },
  methods:{
    //关闭当前页面
    closeBox(){
      this.$emit('closePage')
    },
    showpup(){
      this.$emit('closePage','showpup')
    },
    queryElevanceViews(){
          let param={
            "modelId":this.menuData.menuId
          }
          this.$http.post(QUERYELEVANCEVIEW,param).then(res=>{
            console.log('selectDemo查询关联视图信息成功')
            
            let val= res.data.data
             if(res.data.code=='200' && res.data.data.length>0){
               console.log(res.data.data)
                console.log(res.data.data[0])
               console.log('----------------------')
               console.log(res.data.data[0].lists)
              this.ListArow=[]
                res.data.data.forEach(item=>{
                  item.lists.forEach(ele=>{
                  ele.relationId=item.relationId;
                  ele.modelId=item.modelId;
                  ele.slaveId=item.slaveId;
                  ele.relationType=item.relationType;
                  ele.relationTypelabel=this.getLabel(item.relationType)
                  // {value:1,label:"1:1"},{value:2,label:"1:N"},{value:2,label:"N:1"},{value:2,label:"N:N"}
                  ele.masterTableName=item.masterTableName
                  ele.slaveTableName=item.slaveTableName;
                  this.ListArow.push(ele)
                })
                console.log(this.ListArow)
                debugger
              })
               this.rowspan()
             }
          }).catch(err=>{
            console.log('查询关联视图信息失败')
            console.log(err)
            this.$alert('查询关联视图信息失败', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                return
              }
            });
          })
        },
        getLabel(relationType){
          let arr=[{value:1,label:"1:1"},{value:2,label:"1:N"},{value:2,label:"N:1"},{value:2,label:"N:N"}]
          let label=""
          arr.forEach(ele=>{
            if (relationType==ele.value) {
              label=ele.label
            }
          })
         return label
        },
                  
    rowspan() {
      console.log(this.ListArow)
  		this.ListArow.forEach((item,index) => {
	    	if( index === 0){
	    		this.spanArr.push(1);
	    		this.position = 0;
	    	}else{
	    		if(	item.relationId === 	this.ListArow[index-1].relationId ){
	    			this.spanArr[this.position] += 1;
	    			this.spanArr.push(0);
	    		}else{
	    			this.spanArr.push(1);
	    			this.position = index;
	    		}
	    	}
	    })
  	},
    //修改
    modify(index,data){
      //主表id  modelId
      // 附表id ：slaveId
      // 关联id：relationId
      let slaveId=data.slaveId
      let uadateDateData=[]
      this.ListArow.forEach((ele,index)=>{
        if (ele.slaveId==slaveId && data.modelId==ele.modelId) {
          uadateDateData.push(ele)
        }
      })
      
      this.$emit('tagisShowpup',uadateDateData,{modelId:this.menuData.menuId,slaveId:this.menuData.slaveId})
    },
    //删除
    deleteData(index,data){
      console.log(data)
      console.log(index)
      console.log('==============')
      let param={
         optMode:"D",
          relationId:data.relationId, //关联id
          modelId:data.modelId, 
          slaveId:data.slaveFld  //从表id
      }
      this.$http.post(assoViewMaintain,param).then(res=>{
        console.log(res)
        if (res.data.code=="200") {
          this.$confirm('删除成功', '提示', {
            confirmButtonText: '确定',
            type: 'success'
          })
          //显示预览
          // this.closePup()
        }else{
          this.$confirm(res.data.message, '提示', {
            confirmButtonText: '确定',
            type: 'fail'
          })
        }
      }).catch(err=>{
        console.log(err)
        this.$confirm('删除失败', '提示', {
            confirmButtonText: '确定',
            type: 'fail'
          })
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
    	if (columnIndex === 0) {
    		const _row = this.spanArr[rowIndex];
    		const _col = _row>0 ? 1 : 0;
    		return {
    			rowspan: _row,
    			colspan: 1
    		}
    	}
      if(columnIndex === 1){
    		const _row = this.spanArr[rowIndex];
    		const _col = _row>0 ? 1 : 0;
    		return {
    			rowspan: _row,
    			colspan: 1
    		}
    	}
      // if(columnIndex === 3){
    	// 	const _row = this.spanArr[rowIndex];
    	// 	const _col = _row>0 ? 1 : 0;
    	// 	return {
    	// 		rowspan: _row,
    	// 		colspan: 1
    	// 	}
    	// }
    	if(columnIndex === 5){
    		const _row = this.spanArr[rowIndex];
    		const _col = _row>0 ? 1 : 0;
    		return {
    			rowspan: _row,
    			colspan: 1
    		}
    	}
    },
    
  }
}
</script>
<style lang="less" scoped>
  .elevanceViewscontent{
    width: 100%;
    margin-top:10px ;
    text-align: center;
    height: calc(100% - 1px);
    overflow: scroll;
  }
</style>
